<template>
	<view class="goods_group_com">
		<u-gap height="8" v-if="!store"></u-gap>
		<u-sticky :enable="menuPosition == 2 ? true: false">
			<u-tabs
				:list="tabList"
				:current="current"
				active-color="#FF1010"
				:active-item-style="activeStyle"
				:bar-style="barStyle"
				bar-width="33"
				bar-height="20"
				item-width="188"
				:name="store ? 'category' : 'menuName'"
				@change="change"
			></u-tabs>
		</u-sticky>
		<u-gap height="8"></u-gap>
		<GoodsList v-model="goodsList" :type="store ? 4 : getType" />
		<u-gap height="8"></u-gap>
	</view>
</template>

<script>
import activeIcon from '@/static/iconImg/tab_active.png'
import GoodsList from '@/components/goodsList'
import {
	storeGoods
} from '@/api/http/store'
export default {
	components: {
		GoodsList
	},
	props: {
		value: {
			type: [Array, Object],
			default: () => []
		},
		menuPosition: {
			type: [String, Number],
			default: 1
		},
		store: {
			type: Boolean,
			default: false
		},
		type: {
			type: [String, Number],
			default: 1
		},
	},
	watch: {
		value(val) {
			if (val && !this.store) {
				this.tabList = val.componentMenuList || []
				this.goodsList = val.componentMenuList[0].componentGoodsList
			}

			if (this.store) {
				this.tabList = this.value
				this.change(0)
			}
		}
	},

	computed: {
		getType() {
			if (this.type === 1) {
				return 3
			}

			return this.type
		}
	},

	data() {
		return {
			tabList: [],
			goodsList: [],
			current: 0,
			activeStyle: {
				fontSize: '26rpx'
			},
			barStyle: {
				backgroundImage: `url(${activeIcon})`,
				backgroundSize: '33rpx 20rpx',
				backgroundColor: '#fff',
				backgroundRepeat: 'no-repeat',
				bottom: '-15rpx',
				borderRadius: 0
			}
		}
	},
	methods: {
		change(index) {
			this.current = index
			if (this.store) {
				storeGoods({
					id: this.tabList[index].id
				}).then(res => {
					if (res.code === 200) {
						this.goodsList = res.data
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			} else {
				this.goodsList = this.tabList[index].componentGoodsList
			}
		}
	}
}
</script>

<style lang="scss">
.goods_group_com {
	// margin-top: 16rpx;
}
</style>
